<template>
  <div class="author-item">
    <el-row :gutter="20" v-for="(author, index) in authors" :key="index">
      <el-col :span="4">
        <el-input
          placeholder="名字"
          v-model="author.authorName"
          show-word-limit
          @blur="change"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-input
          :rows="1"
          type="textarea"
          placeholder="介绍"
          v-model="author.authorDescription"
          :maxlength="140"
          show-word-limit
          @blur="change"
        ></el-input>
      </el-col>

      <el-col :span="5">
        <el-input
          placeholder="国籍"
          v-model="author.nationality"
        ></el-input>
      </el-col>

      <el-col :span="5">
        <el-select
          v-model="author.authorType"
          style="margin-left: 20px; z-index: 9999"
          placeholder="职能"
        >
          <el-option
            v-for="item in roles"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="2">
        <el-button type="primary" v-if="index === 0" @click="addOne"
          >添加</el-button
        >
        <el-button type="danger" v-else @click="delOne(author)">删除</el-button>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import { ref } from "vue";
const emit = defineEmits(["update:modelValue"]);

defineProps({
  item: Object,
  index: Number,
  modelValue: Array,
});

const roles = [
  {
    value: "original_author",
    label: "作者",
  },
  {
    value: "translator",
    label: "翻译",
  },
  {
    value: "proof_author",
    label: "校对员",
  },
];

const authors = ref([
  {
    authorName: "",
    authorDescription: "",
    authorType: "",
  },
]);

const addOne = () => {
  authors.value.push({
    authorName: "",
    authorDescription: "",
    authorType: "",
  });
};

const change = () => {
  emit("update:modelValue", authors.value);
};

const delOne = (item) => {
  var index = authors.value.indexOf(item);
  if (index !== -1) {
    authors.value.splice(index, 1);
  }
};

const scrollTo = (item) => {
  emit("scrollTo", item);
};
</script>


<style scoped>
.author-item {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  /* border: 1px solid #ccc; */
  background-color: #fff;
  margin-top: 10px;
  cursor: pointer;

  position: relative;
}

.el-row {
  margin-bottom: 20px;
}

:deep(.el-select) {
  width: 100%;
}

.author-no {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 24px;
  color: #e1e1e1;
  font-weight: bold;
}
</style>